<template>
  <el-container class="home-content">
    <el-header class="main-header">
      <el-collapse v-model="collapseActive">
        <el-collapse-item title="高级筛选" class="collapse-title" name="collapseHeader">
          <el-button type="primary" @click="refreshArr(10)">随机10以内数字</el-button>
          <el-button type="primary" @click="refreshArr(100)">随机100以内数字</el-button>
          <el-button type="primary" @click="refreshArr(1000)">随机1000以内数字</el-button>
          <el-button type="primary" @click="searchAll(10)">查看10以内全部</el-button>
          <el-button type="primary" @click="searchAll(100)">查看100以内全部</el-button>
          <el-button type="primary" @click="searchAll(1000)">查看1000以内全部</el-button>
        </el-collapse-item>
      </el-collapse>
    </el-header>
    <el-main class="main-content">
      <RandomNumber class="infinite-list-item" :randomData='randomNumberArr'></RandomNumber>
    </el-main>
  </el-container>
</template>

<script>
import { onMounted, reactive, ref } from 'vue'
import RandomNumber from '@/components/RandomItem.vue';

export default {
  name: 'edu-number',
  components: {
    RandomNumber
  },
  setup() {
    const randomNumberArr = reactive([]);
    const collapseActive = ref('collapseHeader');
    const createRandomNumber = (count, maxNumber) => {
      clear();
      while (count > 0) {
        randomNumberArr.push(Math.floor(Math.random() * maxNumber));
        count--;
      }
    }
    const refreshArr = (maxNumber) => {
      createRandomNumber(20, maxNumber);
    };

    const searchAll = (maxNumber) => {
      clear();
      let count = 0;
      while (count <= maxNumber) {
        randomNumberArr.push(count);
        count++;
      }
    }

    const clear = () => {
      randomNumberArr.length = 0;
    }

    onMounted(() => {
      refreshArr(100);
    });

    return { 
      collapseActive,
      randomNumberArr, 
      refreshArr, 
      searchAll 
    }
  }

}
</script>

<style scoped>

</style>>